/**
 * 1. 通过forEachFeatureAtPixel方法获得点击位置的要素以及该要素所属的图层
 * 2. 获取图层name属性, 设置相应图层的弹框数据
 * 3. 根据点击位置设置弹框位置
 * @param {object} e 地图上点击像素对象
 * @returns
 */
function addPopup(e) {
  //获取点击位置的坐标
  const coordinate = e.coordinate
  //获取被点击位置存在的要素以及图层
  const myQuery = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
    //console.log(eventLayer)
    return { feature, layer }
  })
  //console.log(myQuery)
  if (!myQuery) {
    //如果点击位置没有要素
    return
  } else if (myQuery.feature && myQuery.layer.values_.name == 'eventLayer') {
    //如果点击位置存在要素并且要素属于eventLayer图层, 调用对应设置弹窗数据的函数
    addPopupEvent(myQuery.feature) //实参, 获取到的要素对象
  } else if (
    myQuery.feature &&
    myQuery.layer.values_.name == 'currentRoadsLayer'
  ) {
    //如果点击位置存在要素并且要素属于currentRoadsLayer图层
    addPopupCurrentRoads(myQuery.feature)
  }
  //设置弹窗位置
  popup.setPosition(coordinate)
}

//关闭弹窗
function closePopup() {
  popup.setPosition(undefined)
}

/**
 * 设置事件查询图层的弹窗数据
 * @param {object} feature 形参, 要素对象
 */
function addPopupEvent(feature) {
  //console.log(feature)
  //修改弹框标题
  $('#popup-content .panel-heading').text('事件查询')
  //对象解构
  const {
    event_type: 事故类型,
    event_level: 事故等级,
    event_time: 发生时间,
    event_spot: 事故地点,
    event_driver: 肇事司机,
    event_car: 肇事车辆,
    event_condition: 处理状态,
  } = feature.values_
  const events = {
    事故类型,
    事故等级,
    发生时间,
    事故地点,
    肇事司机,
    肇事车辆,
    处理状态,
  }
  //清空table
  $('#popup-table').empty()
  //遍历对象 修改弹框内容
  for (let key in events) {
    //字段不为空时
    if (events[key]) {
      //事故等级123分别对应xxx文字
      if (key == '事故等级') {
        switch (events[key]) {
          case '1':
            events[key] = '轻微事故'
            break
          case '2':
            events[key] = '中等事故'
            break
          case '3':
            events[key] = '严重事故'
            break
          case '4':
            events[key] = '超大事故'
            break
        }
      }
      //处理状态123分别对应xxx文字
      if (key == '处理状态') {
        switch (events[key]) {
          case '0':
            events[key] = '已处理'
            break
          case '1':
            events[key] = '处理中'
            break
          case '2':
            events[key] = '待处理'
            break
        }
      }
      //设置弹框
      const list = `<tr><td>${key}</td><td>${events[key]}</td></tr>`
      $('#popup-table').append(list)
    }
  }
}

/**
 * 设置实时路况图层的弹框数据
 * @param {*} feature 形参, 要素对象
 */
function addPopupCurrentRoads(feature) {
  //修改弹框标题
  $('#popup-content .panel-heading').text('实时路况')
  //修改弹框内容
  const list = `
  <tr><td>道路名称</td><td>${feature.get('traffic_road')}</td></tr>
  <tr><td>车流量</td><td>${feature.get('traffic_vehicleflow')}</td></tr>
  <tr><td>采集数据时间</td><td>${feature.get('traffic_time')}</td></tr>
  `
  $('#popup-table').html(list)
}
